<!-- 
	=========LIST========= 
-->
<template id="aj-pager">
	<footer class="aj-pager">
		<a v-if="pageStart > 0" href="#" @click="previousPage">上一页</a>
		<a v-if="(pageStart > 0 ) && (pageStart + pageSize < total)" style="text-decoration: none;">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</a>
		<a v-if="pageStart + pageSize < total" href="#" @click="nextPage">下一页</a>
		<a href="javascript:;" @click="get"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新</a>
		<input type="hidden" name="start" :value="pageStart" />
		页数：{{currentPage}}/{{totalPage}} 记录数：{{pageStart}}/{{total}}
		每页记录数： <input size="2" title="输入一个数字确定每页记录数" type="text" :value="pageSize" @change="onPageSizeChange" />
		跳转： <select @change="jumpPageBySelect;">
			<option :value="n" v-for="n in totalPage">{{n}}</option>
		</select>
	</footer>
</template>

<template id="aj-simple-list">
	<ul class="aj-simple-list">
		<li v-for="(item, index) in result">
			<slot v-bind="item">
				<a :href="(hrefStr || '').replace('{id}', item.id)" @click="show(item.id, index, $event)" :id="item.id">{{item.name}}</a>
			</slot>
		</li>
	</ul>
</template>

<template id="aj-page-list">
	<div class="aj-page-list">
		<ul>
			<li v-for="(item, index) in result">
				<slot v-bind="item">
					<a href="#" @click="show(item.id, index, $event)" :id="item.id">{{item.name}}</a>
				</slot>
			</li>
		</ul>
		<footer v-show="isShowFooter">
			<a v-if="pageStart > 0" href="#" @click="previousPage()">上一页</a>
			<a v-if="(pageStart > 0 ) && (pageStart + pageSize < total)" style="text-decoration: none;">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</a>
			<a v-if="pageStart + pageSize < total" href="#" @click="nextPage()">下一页</a>
			
			<input type="hidden" name="start" :value="pageStart" />
			页数：{{currentPage}}/{{totalPage}} 记录数：{{pageStart}}/{{total}}
			每页记录数： <input size="2" title="输入一个数字确定每页记录数" type="text" :value="pageSize" @change="onPageSizeChange($event)" />
			跳转： <select @change="jumpPageBySelect($event);">
				<option :value="n" v-for="n in totalPage">{{n}}</option>
			</select>
		</footer><div v-show="!!autoLoadWhenReachedBottom" class="buttom"></div>
	</div>
</template>

<template id="aj-tree-item">
	<li>
		<div :class="{bold: isFolder, node: true}" @click="toggle">
			<span>········</span>{{model.name}}
		    <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
	    </div>
	    <ul v-show="open" v-if="isFolder" :class="{show: open}">
		    <aj-tree-item class="item" v-for="(model, index) in model.children" :key="index" :model="model">
		    </aj-tree-item>
		    <li v-if="allowAddNode" class="add" @click="addChild">+</li>
	    </ul>
	</li>
</template>

<template id="aj-process-line">
	<div class="aj-process-line">
		<div class="process-line">
			<div v-for="(item, index) in items" :class="{current: index == current, done: index < current}">
				<span>{{index + 1}}</span><p>{{item}}</p>
			</div>
		</div>
	</div>
</template>

<template id="aj-carousel">
	<div class="aj-carousel aj-carousel-tab">
		<header>
			<ul>
				<li v-for="(item, index) in items" :class="{'active': index === selected}" @click="changeTab(index);">
					{{item.name}}
				</li>
			</ul>
		</header>
		<div>
			<div v-for="(item, index) in items" :class="{'active': index === selected}" v-html="item.content"></div>
		</div>
	</div>
</template>

<template id="aj-banner">
	<div class="aj-carousel aj-banner">
		<header>
			<ul v-show="showTitle">
				<li v-for="(item, index) in items" :class="{'hide': index !== selected}">{{item.name}}</li>
			</ul>
			<ol v-show="showDot">
				<li v-for="n in items.length" :class="{'active': (n - 1) === selected}" @click="changeTab(n - 1);"></li>
			</ol>
		</header>
		<div class="content">
			<div v-for="(item, index) in items" :class="{'active': index === selected}" v-html="getContent(item.content, item.href)">
			</div>
		</div>
	</div>
</template>